<template>
  <div class="input-number">
    <!-- <input class="input-number__input" v-model.lazy="currentValue" /> -->
    <input
      class="input-number__input"
      :value="currentValue"
      @input="handleInput"
    />
    <div>
      <button
        class="input-number__btn input-number__btn-plus"
        @click="setCurrentValue(1)"
        :disabled="currentValue >= max"
      >
        +
      </button>
      <button
        class="input-number__btn"
        @click="setCurrentValue(-1)"
        :disabled="currentValue <= min"
      >
        -
      </button>
    </div>
  </div>
</template>

<script>
/*
  1. 有最大值，和最小值
  2. 点击+，+1，点击-，-1
  3. 输入小于最小值，等于最小值
  4. 输入大于最大值，等于最大值
  5. 输入非数字内容，等于上一次值

  节流和防抖：对函数的性能优化（让函数在指定时间内只触发一次）
    节流: 在指定时间内，第一次生效
    防抖: 在指定时间内，最后一次生效
*/
import debounce from "lodash/debounce";

export default {
  name: "InputNumber",
  props: {
    max: {
      type: Number,
      default: 10,
    },
    min: {
      type: Number,
      default: 1,
    },
    value: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      currentValue: this.value,
    };
  },
  methods: {
    setCurrentValue(value) {
      this.currentValue += value;
    },
    handleInput: debounce(function (e) {
      this.currentValue = e.target.value;
    }, 500),
  },
  watch: {
    value(newVal) {
      this.currentValue = newVal;
    },
    currentValue(newCurrentValue, oldCurrentValue) {
      /*
        将数据转number：
          Number(xxx) 
          +xxx
          xxx * 1
        将数据转字符串
          String(xxx)
          xxx + ''
        就数据转布尔值
          Boolean(xxx)
          !!xxx
      */
      const { min, max } = this;
      // 输入框收集的数据一定的字符串类型，要转number使用
      let currentValue = +newCurrentValue;
      // 3. 输入小于最小值，等于最小值
      if (currentValue < min) {
        currentValue = min;
        // 4. 输入大于最大值，等于最大值
      } else if (currentValue > max) {
        currentValue = max;
      }
      // 5. 输入非数字内容，等于上一次值
      if (Number.isNaN(currentValue)) {
        // if (currentValue !== currentValue) {
        currentValue = oldCurrentValue;
      }
      // console.log(newCurrentValue, oldCurrentValue);
      // 更新InputNumber组件的值
      this.currentValue = currentValue;
      // 更新父组件的值
      this.$emit("input", currentValue);
    },
  },
};
</script>

<style scoped lang="less">
.input-number {
  display: flex;
  border: 1px solid #ccc;
  width: 60px;
}
.input-number__input {
  width: 40px;
  height: 40px;
  outline: none;
  text-align: center;
  border: 0;
}

.input-number__btn {
  width: 20px;
  height: 20px;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid #ccc;
  outline: none;
  border-radius: 0;
  cursor: pointer;
  &:disabled {
    color: #ccc;
    cursor: not-allowed;
  }
}

.input-number__btn-plus {
  border-bottom: 1px solid #ccc;
}
</style>
